@charset "UTF-8";
@import "common/common";

.wrap{
    width: 100%;
    height: 100%;
    img{
        width: 100%;
        height: 100%;
    } 
    .center{
        left: 0;
        right: 0;
        margin:  0 auto;
    }   
}

#page_result{
    position: absolute;
    top: 0;
    left: 400%;
    width: 100%;
    height: 100%;
    background: url(../img/result/result_bg2.jpg) no-repeat center;
    background-size: 100% 100%;
    color: rgb( 37, 29, 25 );
    font-weight: 600;
    .result_name{
        position: absolute;
        top: r(16px);
        left: r(15px);
        width: r(295px);
        height: r(108px);
        animation: bounceInLeft 1s linear;
        //信息边框
        .name_bg{
            position: relative;
            width: 100%;
            height: 100%;
            background: url(../img/result/name.png) no-repeat center;
            background-size:100% 100% ;
        }
        //头像
        .portrait{
            position: absolute;
            left: r(25px);
            top: r(22px);
            width: r(62px);
            height: r(62px);
            z-index: 2;
        }
        //昵称  
        .name{
            position: absolute;
            right: r(80px);
            top: r(36px);
            font-size: r(24px);
            color: rgb( 37, 29, 25 );
            text-align: center;
        }  
    }
    //logo
    .logo{
        background: url(../img/index/logo.png) no-repeat center;
        background-size:cover ;
        position: absolute;
        right: r(20px);
        top: r(18px);
        width: r(257px);
        height: r(75px);
        animation: bounceInRight 1s linear;
    }
    //勋章
    .result_medal{
        position: absolute;
        top: r(114px);
        left: 0;
        right: 0;
        margin:  0 auto;
        width: r(231px);
        height: r(269px);
        animation: fadeIn 4s linear;
        animation: fadeIn 4s linear;
    }
    //猜中数量
    .result_sum{
        position: absolute;
        top: r(381px);
        width: r(342px);
        height: r(103px);
        font-size: r(52px);
        color: rgb( 37, 29, 25 );
        line-height: r(108px);
        text-align: center;
        padding-right: r(24px);
        background: url(../img/result/result.png) no-repeat center;
        background-size:100% 100% ;
        animation: bounceInDown 2s linear;
    }
    //评价语
    .result_text{
        position: absolute;
        top: r(493px);
        width: r(710px);
        height: r(200px);
        font-size: r(32px);
        text-align: center;
        line-height: r(60px);
        padding: r(40px);
        background: url(../img/result/result_text.png) no-repeat center;
        background-size:100% 100% ;
        animation: bounceInUp 3s linear;
    }
    //两个按钮
    .result_nextbtn{
        position: absolute;
        left: r(39px);
        top: r(709px);
        width: r(305px);
        height: r(114px);
        font-size: r(35px);
        text-align: center;
        line-height: r(94px);
        padding-left: r(40px);
        background: url(../img/result/btn_left.png) no-repeat center;
        background-size:100% 100% ;
        animation: bounceInLeft 4s linear;
    }
    .result_sharebtn{
        position: absolute;
        left: r(382px);
        top: r(706px);
        width: r(347px);
        height: r(112px);
        font-size: r(35px);
        text-align: center;
        line-height: r(96px);
        padding-right: r(70px);
        background: url(../img/result/btn_right.png) no-repeat center;
        background-size:100% 100% ;
        animation: bounceInRight 4s linear;
    }
    //排名标题
    .result_rank_title{
        position: absolute;
        bottom:r(255px);   //830px
        width: r(418px); 
        height: r(119px);
        z-index: 4;
    }
    //排名
    .result_rank{
        position: absolute;
        bottom: r(20px);
        width:r(685px);
        height: r(282px);
        background: url(../img/result/rank.png) no-repeat center;
        background-size:100% 100% ;
        animation: bounceIn 4s linear;
        ul{
            padding: r(40px);
        }
        li{
            margin-bottom: r(15px);
            >div{
               white-space: nowrap;
            } 
        }
        .rank_name,.rank_num,.rank_gad{
            font-size: r(24px);
        }
        .rank_portrait,.rank_medal{
            display: inline-block;
            vertical-align: middle;
        }
        //头像
        .rank_portrait{
            width: r(52px);
            height: r(54px);
            margin-left:r(8px);
        }
        .rank_medal{
            width: r(47px); 
            height: r(54px);
            margin-right: r(10px);
            margin-left: r(5px);
        }
    }
}     
  


